<template>
  <div class="box2">
    <div id="container"></div>
    <div class="box1">
      <div class="desc-container">
        <span class="section-title">联系方式</span>
        <div class="section-container">
          <div class="item-container">
            <span class="name">联系人</span>
            <span class="value">某某某</span>
          </div>
          <div class="item-container">
            <span class="name">电子邮箱</span>
            <span class="value">1111111111@qq</span>
          </div>
          <div class="item-container">
            <span class="name">qq号</span>
            <span class="value">12346789</span>
          </div>
          <div class="item-container">
            <span class="name">微信号</span>
            <span class="value">111111</span>
          </div>
          <div class="item-container">
            <span class="name">联系电话</span>
            <span class="value">11111111111111111</span>
          </div>
          <span class="section-title">联系地址</span>
          <div class="section-container">
            <div class="item-container">西安市碑林区陕西高速大厦18楼</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/css/lxwm(1).css";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null,
      lng: 0,
      lat: 0,
      marker: null,
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "	5ee6d1d2d2a5331d1665f28b850e9390", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.Geocoder",
          "AMap.CircleEditor",
          "AMap.Geolocation",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: "1.1", // AMapUI 版本
          plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
        },
        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: "2.0", // Loca 版本
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 17, //初始化地图级别
            center: [108.946346, 34.233736], //初始化地图中心点位置
            dragEnable: true, //鼠标拖拽
            scrollWheel: true, //鼠标放大缩小
          });

          // 创建一个 Marker 实例：
          var marker = new AMap.Marker({
            position: new AMap.LngLat(108.946346, 34.233736), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: "陕西高速大厦",
          });

          // 将创建的点标记添加到已有的地图实例：
          this.map.add(marker);

          this.map.addControl(
            new AMap.ToolBar({
              position: "LT",
            })
          );
          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.HawkEye({ isOpen: true }));
          this.map.addControl(new AMap.MapType());
          this.map.addControl(
            new AMap.Geolocation({
              position: "LB",
              offset: [20, 55],
            })
          );
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped></style>
